<template>
	<view>
		<view class="head-cher">
			<image :src="baseurl+'/imgs2/hh3.png'" mode="widthFix"></image>
			<input type="text" placeholder="老牌坊" placeholder-class="mo" v-model="serarch_name" @confirm="handleSearch">
			<view @click="handleSearch">搜索</view>
		</view>
		<view class="lc-lay">
			<view :class="typeNum==1?'lc-lay-con select':'lc-lay-con'" @click="show(1)">
				<view :class="typeNum==1?'color':''">{{cname}}</view>
				<image :src="typeNum==1?'/static/sw4.png':'/static/sw1.png'" mode="widthFix"></image>
			</view>
			<view :class="typeNum==2?'lc-lay-con select':'lc-lay-con'" @click="show(2)">
				<image :src="typeNum==2?'/static/sw6.png':'/static/sw2.png'" mode="widthFix"
					style="margin-right: 8rpx;"></image>
				<view :class="typeNum==2?'color':''">{{km}}</view>
				<image src="/static/sw1.png" mode="widthFix"></image>
			</view>
			<view :class="typeNum==3?'lc-lay-con select':'lc-lay-con'" @click="show(3)">
				<view :class="typeNum==3?'color':''">{{sname}}</view>
				<image src="/static/sw1.png" mode="widthFix"></image>
			</view>
			<view :class="typeNum==4?'lc-lay-con select width':'lc-lay-con width'" @click="show(4)">
				<view :class="typeNum==4?'color':''">我常买</view>
			</view>
			<view class="lc-lay-con width" @click="show(5)">
				<view>筛选</view>
			</view>
		</view>
		<view class="lc-goods-box" v-for="(item,index) in list">
			<image @click="goodsDetail(item.id)" :src="baseurl+item.thumbnail" mode="aspectFill" class="lc-goods-img">
			</image>
			<view class="lc-goods-detail" @click="goodsDetail(item.id)">
				<view class="lc-goods-title">{{item.title}}</view>
				<view class="lc-goods-num">销量 {{item.sales}}</view>
				<view class="lc-goods-moneys" >
					<image :src="baseurl+'/imgs2/hh7.png'" mode="widthFix"></image>
					<view class="lc-goods-detail-prices">
						<view class="lc-goods-current-price"><text>￥</text>{{item.price}}</view>
						<view class="lc-goods-original-price">￥{{item.market_price}}</view>
					</view>
				</view>
				<view class="lc-goods-con">
					<view class="lc-goods-add">{{item.pingfen}}分 | {{item.shopname}}</view>
					<view class="lc-goods-km">{{item.distance}}km</view>
				</view>
			</view>
		</view>
		<view class="lc-null"></view>
		<view class="lc-black" v-if="state" @click="close">
			<view class="lc-white" @click.stop="">
				<view class="lc-alert-head">
					<view :class="typeNum==1?'lc-lay-con select':'lc-lay-con'" @click="tab(1)">
						<view :class="typeNum==1?'color':''">全部分类</view>
						<image :src="typeNum==1?'/static/sw4.png':'/static/sw1.png'" mode="widthFix"></image>
					</view>
					<view :class="typeNum==2?'lc-lay-con select':'lc-lay-con'" @click="tab(2)">
						<image :src="typeNum==2?'/static/sw6.png':'/static/sw2.png'" mode="widthFix"
							style="margin-right: 8rpx;"></image>
						<view :class="typeNum==2?'color':''">附近</view>
						<image src="/static/sw1.png" mode="widthFix"></image>
					</view>
					<view :class="typeNum==3?'lc-lay-con select':'lc-lay-con'" @click="tab(3)">
						<view :class="typeNum==3?'color':''">智能排序</view>
						<image src="/static/sw1.png" mode="widthFix"></image>
					</view>
					<view :class="typeNum==5?'lc-lay-con select':'lc-lay-con'" @click="tab(5)">
						<view :class="typeNum==5?'color':''">筛选</view>
						<image src="/static/sw1.png" mode="widthFix"></image>
					</view>
					<!-- <view :class="typeNum==4?'lc-lay-con select':'lc-lay-con'" @click="tab(4)">
						<view :class="typeNum==4?'color':''">我常买</view>
					</view> -->
				</view>
				<view class="lc-clay" v-if="typeNum==1">
					<view class="lc-mores" @click="selectClass('全部分类',0)">
						<view>全部分类</view>
						<image src="/static/sw3.png" mode="widthFix" v-if="cid==0"></image>
					</view>
					<view class="lc-mores" v-for="(item,index) in mores" @click="selectClass(item.name,item.id)">
						<view>{{item.name}}</view>
						<image src="/static/sw3.png" mode="widthFix" v-if="cid==item.id"></image>
					</view>
				</view>
				<view class="lc-sbw" v-if="typeNum==2">
					<view class="lc-left">
						<view :class="numbers==index?'lc-left-name bgcolor':'lc-left-name'"
							v-for="(item,index) in address" @click="tabNum(index)">{{item.name}}</view>
					</view>
					<view class="lc-right">
						<view class="lc-mores" v-for="(item,index) in address[numbers].list"
							@click="selectDistance(item.km,item.distance)">
							<view>{{item.km}}</view>
							<image src="/static/sw3.png" mode="widthFix" v-if="distance==item.distance"></image>
						</view>
					</view>
				</view>
				<view class="lc-clay" v-if="typeNum==3">
					<view class="lc-mores" v-for="(item,index) in more" @click="selectSort(item,index)">
						<view>{{item}}</view>
						<image src="/static/sw3.png" mode="widthFix" v-if="sortNumber==index"></image>
					</view>
				</view>
				<view class="lc-clay" style="padding-bottom: 60rpx;" v-if="typeNum==5">
					<view class="jiage">
						<input type="text" name="" id="" placeholder="最低价" v-model="start_price">
						<view>-</view>
						<input type="text" name="" id="" placeholder="最高价" v-model="end_price">
					</view>
					<view class="oks" @click="selectMoney">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				allName: '全部分类',
				nearName: '附近',
				sortName: '智能排序',
				oftenName: '我常买',
				list: ['全部美食', '面包蛋糕甜品', '饮品店', '小吃快餐', '地方菜系'],
				more: ['智能排序', '距离优先', '销量优先', '评分优先'],
				allNumber: -1,
				sortNumber: -1,
				distanceNumber: -1,
				typeNum: 0,
				numbers: 0,
				state: false,
				address: [{
					name: '附近',
					list: [{
						km: '全部',
						distance: '10000'
					}, {
						km: '500m',
						distance: '0.5'
					}, {
						km: '1000m',
						distance: '1'
					}]
				}],
				page: 1,
				shopList: [],
				cid: 0,
				cname: '全部分类',
				distance: 10000,
				km: '附近',
				serarch_name: '',
				sname: '智能排序',
				page: 1,
				list: [],
				mores: [],
				states: 1,
				end_price: '',
				start_price: '',
				
				city: ['', '', ''],
				selectcity:'选择城市'
			}
		},
		onLoad(e) {
			if(e.selectcity){
				var arr = e.selectcity.split("/")
				if(arr){
					this.selectcity = arr[1]+'\n'+arr[2]
					this.city = [arr[0], arr[1], arr[2]]
				}
			}
			
			this.getList()
			this.getClassification()
		},
		methods: {
			getClassification() {
				this.app.post('/api/chef/index/sel_shop_cat', {
					type: 1
				}).then(res => {
					console.log(res)
					this.mores = res
				})
			},
			handleSearch(e) {
				console.log(e.detail.value)
				this.serarch_name = e.detail.value ? e.detail.value : this.serarch_name
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				this.app.post('/api/chef/index/goods_list', {
					page: this.page,
					id: this.id,
					cat_id: this.cid,
					lat: uni.getStorageSync('latitude'),
					lng: uni.getStorageSync('longitude'),
					serarch_name: this.serarch_name,
					distance: this.distance,
					type_sel: this.sortNumber,
					type: this.distance == 10000 ? 1 : this.typeNum == 4 ? 3 : 2,
					start_price: this.start_price,
					end_price: this.end_price,
					city: this.city[0]+'/'+this.city[1]+'/'+this.city[2]
					
					
					
				}).then(res => {
					console.log(res)
					this.list = this.list.concat(res.goods_list.data)
				})
			},
			selectClass(name, id) {
				this.cname = name
				this.cid = id
				this.state = false
				this.page = 1
				this.list = []
				this.getList()
			},
			selectSort(name, index) {
				this.sname = name
				this.sortNumber = index
				this.state = false
				this.page = 1
				this.list = []
				this.getList()
			},
			selectMoney() {
				this.sortNumber = 4
				this.state = false
				this.page = 1
				this.list = []
				this.getList()
			},
			selectDistance(km, distance) {
				this.km = km
				this.distance = distance
				this.state = false
				this.page = 1
				this.list = []
				this.getList()
			},
			tab(num) {
				this.typeNum = num
			},
			tabNum(num) {
				this.numbers = num
			},
			close() {
				this.state = false
			},
			show(num) {
				if (num != 4) {
					this.state = true
				}
				this.typeNum = num
				if (num == 4) {
					this.distance = 0
					this.page = 1
					this.list = []
					this.getList()
					return
				}else{
					this.distance = 10000
				}
			},
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/lc/goodsDetail/goodsDetail?id=' + id
				})
			},
		},
		onReachBottom() {
			this.page += 1;
			this.getList();
		},
	}
</script>

<style lang="scss">
	.head-cher {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #EFF0F2;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		height: 70rpx;
		margin-top: 30rpx;
		position: relative;

		image {
			width: 35rpx;
			height: 35rpx;
			margin-left: 23rpx;
		}

		input {
			width: 500rpx;
			font-size: 24rpx;
			margin-left: 15rpx;
		}

		view {
			font-size: 24rpx;
			position: absolute;
			padding: 10rpx 30rpx;
			background-color: #84BD00;
			border-radius: 10rpx;
			color: #FFFFFF;
			right: 30rpx;
		}
	}

	.lc-lay {
		width: 690rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;

		.lc-lay-con {
			width: 160rpx;
			height: 60rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #FFFFFF;
			box-sizing: border-box;

			view {
				font-size: 22rpx;
				color: #666666;
			}

			image {
				width: 26rpx;
				height: 26rpx;
				margin-left: 8rpx;
			}

			.color {
				color: #84BD00;
			}
		}

		.width {
			width: 80rpx;
		}

		.select {
			border: 1px solid #84BD00 !important;
			background-color: #FCFFF5 !important;
			box-sizing: border-box !important;
		}
	}

	.lc-goods-box {
		width: 690rpx;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;

		.lc-goods-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-left: 30rpx;
		}

		.lc-goods-detail {
			width: 390rpx;
			margin-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			height: 220rpx;

			.lc-goods-title {
				width: 100%;
				font-size: 30rpx;
				color: #3D3D3D;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.lc-goods-num {
				font-size: 24rpx;
				background-color: #F7F7F7;
				color: #666666;
				border-radius: 50rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
			}

			.lc-goods-moneys {
				width: 100%;
				position: relative;

				image {
					width: 100%;
					height: 58rpx;
				}

				.lc-goods-detail-prices {
					position: absolute;
					width: 100%;
					height: 58rpx;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;

					.lc-goods-current-price {
						font-size: 36rpx;
						color: #FB4E2F;
						font-weight: bold;

						text {
							font-size: 26rpx;
						}
					}

					.lc-goods-original-price {
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
				}
			}

			.lc-goods-con {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lc-goods-add {
					width: 300rpx;
					font-size: 22rpx;
					color: #999999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.lc-goods-km {
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
	}

	.lc-black {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 66;
		background-color: rgba(0, 0, 0, .7);

		.lc-white {
			width: 750rpx;
			background-color: #FFFFFF;
			border-radius: 0 0 30rpx 30rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			overflow: hidden;

			.lc-alert-head {
				width: 690rpx;
				display: flex;
				padding: 30rpx 0;

				.lc-lay-con {
					width: 165rpx;
					height: 60rpx;
					margin-right: 30rpx;
					background-color: #F7F7F7;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #FFFFFF;
					box-sizing: border-box !important;

					view {
						font-size: 26rpx;
						color: #666666;
					}

					.color {
						color: #84BD00;
					}

					image {
						width: 26rpx;
						height: 26rpx;
						margin-left: 8rpx;
					}
				}

				.select {
					border: 1px solid #84BD00 !important;
					background-color: #FCFFF5 !important;
					box-sizing: border-box !important;
				}
			}

			.lc-sbw {
				width: 750rpx;
				display: flex;

				.lc-left {
					width: 180rpx;
					background-color: #FAFAFA;

					.lc-left-name {
						width: 180rpx;
						line-height: 80rpx;
						font-size: 26rpx;
						color: #3D3D3D;
						text-align: center;
					}
				}

				.lc-right {
					width: 570rpx;

					.lc-mores {
						width: 510rpx;
						margin-left: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 80rpx;

						view {
							font-size: 26rpx;
							color: #3D3D3D;
						}

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.lc-clay {
				width: 690rpx;

				.jiage {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 30rpx;
					padding-bottom: 60rpx;

					input {
						width: 350rpx;
						background-color: #F7F7F7;
						text-align: center;
						height: 88rpx;
						border-radius: 50rpx;
					}

					view {
						padding: 0 20rpx;
					}
				}

				.oks {
					width: 100%;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					background-color: #84BD00;
					color: #FFFFFF;
					font-size: 30rpx;
				}

				.lc-mores {
					width: 690rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					view {
						font-size: 26rpx;
						color: #3D3D3D;
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>